<template>
    <el-dialog :model-value="props.visible" title="销售审核" width="49%" @close="handleClose">
        <template #header>
            <div class="header">
                <h3>销售审核</h3>
                <el-icon class="tips-icon">
                    <QuestionFilled />
                </el-icon>
                <span class="tips">按照收到的款项如实填写，付款渠道填错，付款金额不一致，付款名称不属实，付款时间不属实，都有可能导致审核不通过</span>
            </div>
        </template>
        <el-descriptions :column="2">
            <el-descriptions-item label="客户名称">{{props.customers.filter((item:any)=>item.id == props.orderDetails.customerId)[0]?.customerName}}</el-descriptions-item>
            <el-descriptions-item label="应收金额">{{`${examineInfo.needMoney || 0} 元` }}</el-descriptions-item>
            <el-descriptions-item label="所属公司">A公司</el-descriptions-item>
            <el-descriptions-item label="已收金额">{{ `${examineInfo.receivedMoney || 0} 元` }}</el-descriptions-item>
        </el-descriptions>
        <el-form ref="formRef" :model="formData" label-width="80px" >
            <el-form-item label="付款方式" prop="paymentMethod" align="right">
                <el-select v-model="formData.paymentMethod" placeholder="请选择"  :fit-input-width="true" style="width: 260px">
                    <el-option v-for="item in pay_type" :key="item.value" :value="item.value" :label="item.label"></el-option>
                </el-select>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item :label="formData.paymentMethod == '1'?'店铺名称':'付款方'" prop="shopName" placeholder="请选择" align="right">
                        <el-select v-model="formData.shopName" :fit-input-width="true" style="width: 260px">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="付款日期" prop="paymentDate" placeholder="请选择" align="right">
                        <el-date-picker type="date" v-model="formData.paymentDate" style="width: 260px" placeholder="付款时间"  format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="付款金额" prop="money" align="right">
                        <el-input type="number" v-model.number="formData.money" @change="onPirceChange" placeholder="请输入" style="width: 260px" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="付款单号" prop="paymentOrderCode" align="right">
                        <el-input v-model="formData.paymentOrderCode" placeholder="请输入" style="width: 260px" ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { salerExamineApi,getSalerExamineByIdApi } from '@/api/sj/productManagement/customizedOrder/index';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps<{
    visible: boolean,
    orderDetails: any,
    customers: any[],
    pay_type: any[]
}>();
const emits = defineEmits(['close', 'submit']);
const formRef = ref<FormInstance>();
const formData = ref({
    paymentMethod: undefined,
    shopName: undefined,
    paymentDate: undefined,
    money: undefined,
    paymentOrderCode: undefined,
    remark: undefined
});

const options = ref<any>({});
const { online_payment_type, offline_payment_type } = toRefs<any>(proxy?.useDict('online_payment_type', 'offline_payment_type'));

const examineInfo = ref<any>([]);

/** 获取过往销售审核信息 */
watch(()=>[props.visible, props.orderDetails], async ([newVisible, newData])=>{
    if(newVisible && newData){
        const { code, data } = await getSalerExamineByIdApi(newData.id);
        if(code == 200){
            examineInfo.value = data
        }
    }
});

watch(()=>formData.value.paymentMethod, (newData) => {
    if(newData == '1'){
        options.value = online_payment_type.value;
        
    }else if(newData == '2'){
        options.value = offline_payment_type.value;
    }
});

const onPirceChange = (value: number) => {
    if(value < 0){
        formData.value.money = undefined;
    }
};

const handleSubmit = async () => {
    const submitData = {
        ...formData.value,
        businessId: props.orderDetails.id
    };
    const{ code } = await salerExamineApi(submitData);
    if(code == 200){
        emits('submit', true);
        handleClose();
    }else{
        emits('submit', false);
    }
};

const handleClose = () => {
    formRef.value?.resetFields();
    emits('close')
};

</script>

<style lang="scss" scoped>
.header{
    display: flex;
    align-items: center;
    .el-icon{
        margin-left:10px;
    };
    .tips-icon:hover + .tips{
        visibility: visible;
    }
    .tips{
        color: red;
        font-size: 15px;
        margin-left: 25px;
        visibility: hidden;
    }
}
.contract-info{
    font-weight: bolder;
}

::v-deep(.el-input__wrapper){
    width:100%
}
</style>